<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>搜索页面</title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<style>
		html,body {
				background-color: #efeff4;
			}
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			.mui-control-content {
				background-color: white;
				min-height: 215px;
			}
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			.mui-bar~.mui-content .mui-fullscreen {
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				margin-bottom: 40px;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				margin-bottom: 45px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
			.danger{
				color: #dd524d;
			}
			.success{
				color: #4cd964;
			}
			.primary{
				color: #007aff;
			}
			.warning{
				color: #f0ad4e;
			}
			.purple{
				color: #8a6de9;
			}
			.black{
				color:#000000;
			}
			.mui-search{
				left: 12%;
				top: -40px;
			}
			#filter{
				width: 97.3%;
			}
			#filter .btnConfirm{
				margin-top: 10px;
				margin-bottom: 10px;
			}
			#filter a{
				float: left;
			}
			#filter p {
				padding: 10px 10px 0;
			}
			.mui-bar{
				background-color: rgba(0,153,204,.9);
			}
			.mui-icon{
				color: #FFFFFF;
			}
			.mui-search .mui-placeholder .mui-icon {
			    font-size: 20px;
			    color: #FFFFFF;
			}
			.btnConfirm { 
				width: 90%;
				height: 46px;
				left: 50%;
				-webkit-transform: translate(-50%);
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
	        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	        <a id="icon-shaixuan" class="mui-icon iconfont icon-shaixuan mui-pull-right" href="#filter" style="color: #FFFFFF;"></a>
	        <!--<a id="search" class="mui-icon mui-icon-search mui-pull-right" style="display: none;color: #FFFFFF;"></a>--> 
	        <div class="mui-input-row mui-search" style="width:70%;color: #FFFFFF;">
	            <input type="search" id="district" class="mui-input-clear" placeholder="输入小区关键字搜索" style="color: #FFFFFF;"/>
	        </div>
	    </header>
	   <div id="filter" class="mui-popover">
	   			<p>升级工单</p>
	   				<div class="mui-scroll-wrapper  mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll upgrade">
						<a class="mui-control-item  mui-active" data-type="">
							全选
						</a>
						<a class="mui-control-item" data-type="1">
							普通
						</a>
						<a class="mui-control-item" data-type="2">
							升级
						</a>
					</div>
				</div>
	   			<p>任务等级</p>
	   			<div class="mui-scroll-wrapper  mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll taskLevel">
						<a class="mui-control-item mui-active" data-type="">
							全选
						</a>
						<a class="mui-control-item" data-type="1">
							普通
						</a>
						<a class="mui-control-item" data-type="2">
							较急
						</a>
						<a class="mui-control-item" data-type="3">
							紧急
						</a>
						<a class="mui-control-item" data-type="4">
							督办
						</a>
					</div>
				</div>
				<button class="mui-btn mui-btn-danger btnConfirm">确认</button>
		</div>
		<div class="mui-content" >
			<div id="slider" class="mui-slider mui-fullscreen">
				<div class="mui-slider-group" id="list">
					<div class="mui-slider-item mui-control-content mui-active">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll" id="mui-scroll-data" style="margin-top:45px;">
								<ul class="mui-table-view" id="work-serach-result">
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/md5.js" ></script>
	<script type="text/javascript" src="js/uuid.js" ></script>
	<script type="text/javascript" src="js/utils.js" ></script>
	<script src="js/mui.pullToRefresh.js"></script>
	<script src="js/mui.pullToRefresh.material.js"></script>
	<script src="js/arttmpl.js"></script>
	<script id='search-template' type="text/template">
			<% if(row){
				var dtype = (row.workorderstatus == 1 ) ? 'unaccept' : ((row.workorderstatus == 2) ? 'goingon' :((row.workorderstatus == 3 ) ? 'delay' : ((row.workorderstatus == 4)?'complete' :((row.workorderstatus == 7 )?'refuse': 'complete') )) )
				var target = "task-detail-"+dtype+".html" ;         
				var taskId = row.id ;
				var search = 'search';
			%>
				<a id="node_<%=taskId%>" data-date="<%=row.udate%>" hrefid="search-task-detail-<%=dtype%>" href="<%=target%>?taskId=<%=taskId%>&dataType=<%=dtype%>&search=<%=search%>" class="mui-navigate-right xhz-child">
					<p class="mui-pull-right mui-h5 danger"><%=(row.taskLevelName || '')%></p>
					<% if(row.tasklevel == '2') {%>
						<span class="mui-media-object mui-pull-right mui-icon mui-icon-arrowthinup danger" style="font-weight:bold;"></span>
					<%} else if(row.tasklevel == '3') {%>
						<span class="mui-media-object mui-pull-right mui-icon mui-icon-arrowthinup danger" style="font-weight:bold;"></span>
						<span class="mui-media-object mui-pull-right mui-icon mui-icon-arrowthinup danger" style="font-weight:bold;"></span>
					<%}%>
					<div class="mui-media-body">
	                   <p class="mui-ellipsis mui-h4 black"><%=(row.businessdescription || '&nbsp;&nbsp;')%></p>
	                    <p class="mui-h5">联系人：<%=(row.username || '&nbsp;&nbsp;')%> </p>
	                    <p class="mui-h5 mui-ellipsis">联系方式：<%=(row.userphoneno || '&nbsp;&nbsp;')%></p>
	                    <p class="mui-h5 mui-ellipsis">联系地址：<%=(row.useraddress || '&nbsp;&nbsp;')%></p>
	                    <p class="mui-h5">时间：<%=( row.cdate || '&nbsp;&nbsp;')%></p>
		            </div>
			     </a>
			<%}%>
	</script>
	<script>
	// 选项卡切换和下拉刷新
		mui.init();
		(function($,doc) {
			var aniShow = "pop-in", page = 1, timestamp = 0 ,scrollNode = null; 				// 分页全局变量
			 //只有ios支持的功能需要在Android平台隐藏；
			if (mui.os.android) {
				var list = document.querySelectorAll('.ios-only');
				if (list) {
					for (var i = 0; i < list.length; i++) {
						list[i].style.display = 'none';
					}
				}
				//Android平台暂时使用slide-in-right动画
				if(parseFloat(mui.os.version)<4.4){
					aniShow = "slide-in-right";
				}
			}
			//阻尼系数
			var deceleration = mui.os.ios?0.003:0.0009;
			$('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: true, //是否显示滚动条
				deceleration:deceleration
			});
			var param = {
				"upgrade" : "",
				"taskLevel" : "",
				"district" : ""
			};
//			var upgrade = "", taskLevel = "",district = "";
			$(".upgrade").on("tap","a",function(){
				param.upgrade = this.getAttribute("data-type");
			});
			
			//任务等级
			$(".taskLevel").on("tap","a",function(){
				param.taskLevel = this.getAttribute("data-type");
			});
			
			$.plusReady(function() {
				//初始化所有下拉刷新，上拉加载。
				scrollNode = $('#mui-scroll-data').pullToRefresh({
					down: {
							callback: function() {
								var self = this;
								setTimeout(function() {
									var ul = doc.getElementById('work-serach-result');
									var children = self.element.querySelectorAll(".mui-table-view .xhz-child");
									
									if(children.length > 0){
										timestamp = children[0].getAttribute("data-date") ;
										createAndInsertFragment(false,ul,8,"down" ,timestamp);
									}else{
//										timestamp = 0 ;
										mui.toast("请点击显示更多哦");
									}
									self.endPullDownToRefresh();
								}, 500);
							}
						},
						up: {
							auto: false,
							contentdown: '点击显示更多哦',
							callback: function() {
								var self = this;
								setTimeout(function() {
									var ul = doc.getElementById('work-serach-result');
									var children = self.element.querySelectorAll(".mui-table-view .xhz-child");
									if(children.length == 0){
										page = 1;
									}
									createAndInsertFragment(true,ul,8,"up",0);
									self.endPullUpToRefresh(); 
								}, 500);
							}
						}
				});
				
				//搜索查询
				$(".mui-bar").on("tap","#search",function(){
					searchBydistrict();//查询
				});
				//键盘搜索按钮
				doc.getElementById("district").addEventListener("keydown",function(e){
			        if(13 == e.keyCode){
			            searchBydistrict();//查询
			        }
			    },false);
				
				
				//确认查询
				$("#filter").on("tap",".btnConfirm",function(){
					page = page > 2 ? 2 : page;
					timestamp = 0;
					var ul = doc.getElementById('work-serach-result');
					ul.innerHTML = "";
					scrollNode.refresh(true) ;
					createAndInsertFragment(false,ul,8,"down" ,timestamp);
					mui("#filter").popover("toggle");
				});
				
				
				$('.mui-slider-group').on('tap', 'a', function() {
					var href = this.href;
					var id =  this.getAttribute('hrefid');
					console.debug(id +"  ==   " +href) ;
					$.openWindow({
						id: id,
						url: href,
						show: {
							aniShow: aniShow
						},
						waiting: {
							autoShow: true
						}
					});
				});
//				scrollNode.pullDownLoading();
			});
			//条件查询
			var searchBydistrict = function(){
				var district = doc.getElementById("district").value;
				page = page > 2 ? 2 : page;
				timestamp = 0;
				param.district = district;
				param.upgrade = "";
				param.taskLevel = "";
				var ul = doc.getElementById('work-serach-result');
				ul.innerHTML = "";
				scrollNode.refresh(true) ;
				createAndInsertFragment(false,ul,8,"down" ,timestamp);
				console.debug("district is "+param.district);
				doc.getElementById("district").blur();
			}
			/**
			 * 创建并添加文档碎片
			 * @param {Object} count 一次显示的条目
			 * @param {Object} reverse 指定是正向插入还是反向插入
			 * @param {Object} parent 父级元素
			 */
			var createAndInsertFragment = function(reverse,parent,pageSize,upOrDown,timestamp) {
				var currentPage = ('down' == upOrDown) ? 0 : page;
				console.debug("currentPage is "+currentPage);
				xhz.ajax(URL_TASK,{page:currentPage + '', pageSize:pageSize, upOrDown:upOrDown,updateTime:timestamp,isupworder:param.upgrade,tasklevel:param.taskLevel,district:param.district},function(data){
					console.debug("data is "+JSON.stringify(data));
					
					if(!data || data.code != 1){
						mui.toast('你刷的太勤快了，亲');
						return ;
					}
					afterGotData(data.data);
				}) ;
				
				/**
				 * 处理数据逻辑
				 * @param {Object} data
				 */
				function afterGotData(data ) {
					if(!data || !data[0]){
						mui.toast('亲，暂时没有别的任务了');
						return;
					}
					//有数据page+1
					if('up' == upOrDown){
						++page ;
					}
					
					console.debug("数据处理");
					var fragment = document.createDocumentFragment();
					$.each(data ,function(){
						var $row = this ;
//							console.debug("udate  is  "+$row.udate);
						var detailInfo = template('search-template', {
							"row": $row
						});
						var li = document.createElement('li');
							li.className = 'mui-table-view-cell mui-media';
							li.innerHTML = detailInfo ;
						fragment.appendChild(li);
					}) ;
					
					// 将文档碎片插入到DOM节点
					reverse ? parent.appendChild(fragment) : parent.insertBefore(fragment, parent.firstChild);

				}
			};
			dataRefresh = function(){
				page = 2;
				timestamp = 0;
				var ul = doc.getElementById('work-serach-result');
				ul.innerHTML = "";
				scrollNode.refresh(true) ;
				createAndInsertFragment(false,ul,8,"down" ,timestamp);
			}
			window.addEventListener("taskinfo:refresh", dataRefresh);
			
		})(mui,document);
	
	</script>
</html>